<template>
	<view class="wrapper">
		<view class="login main-flex">
			<view class="login-app">
				<!--#ifdef MP-WEIXIN-->
				<view class="login-bar" :style="{height: `${setStore?.menuButton?.top || 0}px`}"></view>
				<!-- #endif -->
				<view class="login-logo">
					<image class="login-logo-img" :src="imgUrl(setStore.appLogo)"></image>
				</view>
				<view class="login-name">{{setStore.appName}}</view>
			</view>
			<view class="login-content">
				<!-- #ifndef MP-WEIXIN -->
				<uni-forms :modelValue="formData">
					<uni-forms-item label="姓名" name="phone">
						<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="年龄" name="password">
						<input type="text" v-model="formData.password" placeholder="请输入年龄" />
					</uni-forms-item>
				</uni-forms>
				<button @click="submitForm">Submit</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="login-content-btns">
					<button
						class="ty-button ty-button-confirm login-btn"
						@agreeprivacyauthorization="submitForm"
						open-type="agreePrivacyAuthorization"
						:disabled="isSubmit"
						:loading="isSubmit">授权登录</button>
					<button class="ty-button ty-button-confirm login-btn" @click="submitBack">去逛逛</button>
				</view>
				<!-- #endif -->
			</view>
			<view class="login-agreement main-flex" @click="changeAgreement">
				<uni-icons class="login-agreement-icon" :type="isAgreement?'checkbox-filled':'circle'" size="20" :color="isAgreement?'#e3230e':'#666666'"></uni-icons>
				<text>我已阅读并同意</text>
				<text class="login-agreement-item" @click.stop="goAgreement(1)">《服务协议》</text>
				<text>和</text>
				<text class="login-agreement-item" @click.stop="goAgreement(2)">《隐私政策》</text>
			</view>
		</view>
		<privacy
			:showPrivacy="showPrivacy"
			@close="closePrivacy"
			@cancel="cancelPrivacy"
			@confirm="confirmPrivacy"></privacy>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { login, wxMpLogin, wxSaveInfo } from "@/api/app_api/login"
import { updateHeard } from "@/api/app_api/user"
import { setToken } from '@/utils/auth'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const formData = ref({
		phone: ''
		,password: ''
	})
	
	const submitForm = (e) => {
		if (!isAgreement.value) return uni.$u.toast('阅读并同意《服务协议》和《隐私政策》')
		// #ifndef MP-WEIXIN
		userStore.login(formData.value).then(res => {
			uni.switchTab({
				url: '/pages/index/index'
			})
			userStore.getUserInfo()
		})
		// #endif
		// #ifdef MP-WEIXIN
		if (e.detail.errMsg === 'agreePrivacyAuthorization:ok') {
			showPrivacy.value = true
		}
		// #endif
		
	}
	const isAgreement = ref()
	const changeAgreement = () => {
		isAgreement.value = !isAgreement.value
	}
	// 查看协议
	const goAgreement = (type) => {
		uni.navigateTo({
			url: `/pages/web/web?type=${type}`
		})
	}
	
	// 去逛逛
	const submitBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	
	// 授权处理
	const showPrivacy = ref(true)
	// 确认
	const isSubmit = ref(false)
	const confirmPrivacy = async (user) => {
		const openId = await userStore.wxMpOpenId()
		if (!openId) return uni.$u.toast('获取openId失败')
		isSubmit.value = true
		updateHeard({
			// nickName: user.nickName,
			heardUrl: user.headerImg
		}).then(res => {
			isSubmit.value = false
			getUserInfoFun()
		}).catch(err => {
			isSubmit.value = false
			uni.$u.toast(err)
		})
	}
	// 获取用户信息
	const getUserInfoFun = () => {
		userStore.getUserInfo().then(userRes => {
			userStore.isLogin = userRes?.data?.phone || userRes?.data?.heardImg
			if (userRes?.data?.heardImg && !userRes?.data?.phone) { // 未获得手机号
				uni.navigateTo({
					url: '/pages/mine/bind'
				})
			}
		})
	}
	// 拒绝
	const cancelPrivacy = () => {
		showPrivacy.value = false
	}
	// 关闭
	const closePrivacy = () => {
		showPrivacy.value = false
	}
	
</script>

<style lang="scss">
	.login {
		height: 100vh;
		flex-direction: column;
		padding: 0 40rpx;
		justify-content: space-between;
		&-app {
			width: 100%;
			text-align: center;
			margin-top: 80rpx;
		}
		&-bar {
			width: 100%;
		}
		&-content {
			width: 100%;
			&-title {
				font-size: 28rpx;
				text-align: $text-light;
			}
			&-subtitle {
				font-size: 28rpx;
				text-align: $text-light;
			}
			&-btns {
				margin-top: 40rpx;
			}
		}
		&-logo {
			&-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}
		&-name {
			font-size: 48rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		&-btn {
			width: 100%;
			height: 72rpx;
			justify-content: center;
			font-size: 28rpx;
			&+.login-btn {
				margin-top: 40rpx;
			}
		}
		&-agreement {
			width: 100%;
			font-size: 28rpx;
			margin-bottom: 180rpx;
			&-icon {
				margin-right: 10rpx;
			}
			&-item {
				color: #8c97cb;
			}
		}
	}
</style>
